<template>
  <el-dialog
    :model-value="visible"
    title="选择品牌"
    :before-close="beforeClose"
  >
    <div class="HomeEdit_search">
      <el-input
        v-model="keyword"
        placeholder="品牌搜索内容"
        class="input-with-select"
        style="width: 300px"
      >
        <template #append>
          <el-button @click="handlerFilter" :icon="Search" />
        </template>
      </el-input>
    </div>
    <div class="HomeEdit_table">
      <el-table
        ref="multipleTableRef"
        :data="tableList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="品牌推荐" />
        <el-table-column label="相关" show-overflow-tooltip>
          <template #default="scope">
            <span>商品:</span>
            <span>评价:</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="HomeEdit_bottom">
      <div class="HomeEdit_pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :small="false"
          :background="true"
          layout="  pager, next"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="HomeEdit_button">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCancelEdit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import * as home from "@/request/modules/home";
import useTable from "@/hooks/useTable";
import { ref, type Ref } from "vue";
import type { HomeList, BrandList } from "@/types/global";

const keyword = ref("");
// 接收父传过来的参数
const props = defineProps<{ visible: boolean }>();
const ownForm = ref({}) as Ref<BrandList>;
const handleSelectionChange = (val: BrandList) => {
  ownForm.value = val.map((item) => {
    return {
      brandId: item.id,
      brandName: item.name,
    };
  });
};

const {
  tableList,
  pagination,
  fetchData,
  handleSizeChange,
  handleCurrentChange,
} = useTable(home.getBrandList, {
  keyword: keyword,
});

const emit = defineEmits<{
  (event: "cancel"): void;
  (event: "confirm", ownForm: BrandList): void;
}>();

const handleCancel = () => {
  emit("cancel");
};
const handleCancelEdit = () => {
  console.log("ownForm.value", ownForm.value);

  emit("confirm", ownForm.value);
};

// 搜索
const handlerFilter = () => {
  fetchData();
  keyword.value = "";
};
// 模态框关闭前的回调
const beforeClose = () => {
  handleCancel(); //重新调用关闭的事件
};
</script>

<style scoped lang="less">
.HomeEdit_search {
  margin-bottom: 20px;
}
.HomeEdit_table {
  margin-bottom: 20px;
}
.HomeEdit_bottom {
  display: flex;
  flex-direction: column;
  align-items: end;
  .HomeEdit_pagination {
    margin-bottom: 40px;
  }
  .HomeEdit_button {
    margin-bottom: 20px;
  }
}
</style>
